<template>
  <div class="container">
    <input class="book" v-model="query"  :class="{mt:results.length==0}" placeholder="输入书名搜索">
    <ul class="results">
      <li  v-for="item in results" >
        <h3 class="book-name" @click="toBook(item)">{{item.title}}</h3>
        <p v-for="info in item.all" v-text="info"></p>
        <p v-if="item.desc">简介：{{item.desc}}</p>
      </li>
    </ul>

  </div>
</template>

<script>
  import fetch from '@/utils/fetch';
  import { Indicator } from 'mint-ui';
  export default {
    metaInfo: {
      // if no subcomponents specify a metaInfo.title, this title will be used
      title: '搜索',
      // all titles will be injected into this template
      titleTemplate: '%s | 小说阅读'
    },
    name: "S",
    data(){
      return {
        query: '',
        results: [],
        mt: ''
      }
    },
    watch:{
      query(nv){
        if(this.query!=''){
          this.getList()
        }else {
          this.results = [];
        }
      }
    },
    methods:{
      toBook(book){
        this.$store.dispatch('storeBook',book)
        this.$router.push(`/reader/b?url=${book.link}`)
      },
      getList(){
        if(this.query.trim()==='')
          return
        Indicator.open();
        fetch.get(`api/novels?q=${this.query}`).then(res=>{
          let data  = res.data;
          this.results =[];
          if(data.code === 200 && this.query !== ''){
            data.list.forEach(item =>{
              item.forEach(i=>{
                i.link=i.link.replace('http://m.biduo.cc','')
                this.results.push(i);
              })
            })
            if(this.results.length == 0){
              this.results.push(this.empty)
            }
          }else{
            this.results=[this.empty]
          }
          Indicator.close();
        }).catch(err =>{
          Indicator.close();
        })
      }
    }
  }
</script>

<style scoped>
  .container{
    padding: 45px 0 55px;
    min-height: calc(100vh - 100px);
    overflow-y: scroll;
    text-align: center;
    background: #4e81cf;
  }
  .results{
    list-style: none;
    color: #fff;
    text-align: left;
    margin: 0;
    padding: 0;
  }
  .results li{
    border-bottom: 1px solid #fff;
    padding: 10px 20px;
  }
  .mt{
    margin-top: 40vh;
  }
  .book{
    border-radius: 5px;
    border: 1px solid #fff;
    outline: none;
    text-indent: 0.5em;
    line-height: 2em;
    font-size: 1.1em;
    width: 80vw;
    transition: all 1s;
  }
  .book-name{
    text-decoration: none;
    font-size: 1.3em;
    color: #fff;
  }
</style>
